<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="/static/item/scss/shop.css" />
	<link rel="stylesheet" type="text/css" href="/static/item/scss/main.css"/>
	<link rel="stylesheet" href="/static/item/scss/header.css" />
	<link rel="stylesheet" type="text/css" href="/static/item/bootstrap/css/bootstrap.css"/>
</head>
<body>
<div id="max">
	<header>
		<div class="min">
			<ul class="header_ul_left">
				<li class="glyphicon glyphicon-home"> <a href="shouye.html" class="aa">首页</a></li>
				<li class="glyphicon glyphicon-map-marker"> <a href="javascript:;">北京</a>
					<ol id="beijing">
						<li style="background: red;"><a href="javascript:;" style="color: white;">北京</a></li>
						<li><a href="javascript:;">上海</a></li>
						<li><a href="javascript:;">天津</a></li>
						<li><a href="javascript:;">重庆</a></li>
						<li><a href="javascript:;">河北</a></li>
						<li><a href="javascript:;">山西</a></li>
						<li><a href="javascript:;">河南</a></li>
						<li><a href="javascript:;">辽宁</a></li>
						<li><a href="javascript:;">吉林</a></li>
						<li><a href="javascript:;">黑龙江</a></li>
						<li><a href="javascript:;">内蒙古</a></li>
						<li><a href="javascript:;">江苏</a></li>
						<li><a href="javascript:;">山东</a></li>
						<li><a href="javascript:;">安徽</a></li>
						<li><a href="javascript:;">浙江</a></li>
						<li><a href="javascript:;">福建</a></li>
						<li><a href="javascript:;">湖北</a></li>
						<li><a href="javascript:;">湖南</a></li>
						<li><a href="javascript:;">广东</a></li>
						<li><a href="javascript:;">广西</a></li>
						<li><a href="javascript:;">江西</a></li>
						<li><a href="javascript:;">四川</a></li>
						<li><a href="javascript:;">海南</a></li>
						<li><a href="javascript:;">贵州</a></li>
						<li><a href="javascript:;">云南</a></li>
						<li><a href="javascript:;">西藏</a></li>
						<li><a href="javascript:;">陕西</a></li>
						<li><a href="javascript:;">甘肃</a></li>
						<li><a href="javascript:;">青海</a></li>
						<li><a href="javascript:;">宁夏</a></li>
						<li><a href="javascript:;">新疆</a></li>
						<li><a href="javascript:;">港澳</a></li>
						<li><a href="javascript:;">台湾</a></li>
						<li><a href="javascript:;">钓鱼岛</a></li>
						<li><a href="javascript:;">海外</a></li>
					</ol>
				</li>
			</ul>
			<ul class="header_ul_right">

				<li style="border: 0;"><a href="http://auth.gulimall.com/" class="li_2">[[${session.user!=null?session.user.nickname:""}]]</a></li>
				<li><a href="../注册页面\index.html" style="color: red;">免费注册</a> |</li>
				<li><a href="javascript:;" class="aa">我的订单</a> |</li>

			</ul>
		</div>
	</header>
	<nav>
		<div class="nav_min">
			<div class="nav_top">
				<div class="nav_top_one"><a href="#"><img src="/static/item/img/logo1.jpg"/></a></div>
				<div class="nav_top_two"><input type="text"/><button onclick="search()">搜索</button></div>
				<div class="nav_top_three"><a href="../JD_Shop/One_JDshop.html">我的购物车</a><span class="glyphicon glyphicon-shopping-cart"></span>
					<div class="nav_top_three_1">
						<img src="/static/item/img/44.png"/>购物车还没有商品，赶紧选购吧！
					</div>
				</div>
			</div>
			<div class="nav_down">
				<ul class="nav_down_ul">
					<li class="nav_down_ul_1" style="width: 24%;float: left;"><a href="javascript:;">全部商品分类</a>

					</li>

				</ul>
			</div>
		</div>
	</nav>

</div>


<div class="crumb-wrap">
	<div class="w">



	</div>
</div>
<div class="Shop">
	<div class="box">
		<div class="box-one ">
			<div class="boxx">

				<div class="imgbox">
					<div class="probox">
						<img class="img1" alt="" th:src="${item.skuInfo?.skuDefaultImg}"  >
						<div class="hoverbox"></div>
					</div>
					<div class="showbox">
						<img class="img1" alt="" th:src="${item.skuInfo?.skuDefaultImg}">
					</div>
				</div>

				<div class="box-lh">

					<div class="box-lh-one">
						<ul>
							<li th:each="skuImage:${item?.images}">
								<img th:src="${skuImage.imgUrl}"/>
								<!--								<li><img src="/static/item/img/59ded62eN64a9784c.jpg" /></li>
                                                                <li><img src="/static/item/img/59ded626Ne3c69b70.jpg" /></li>
                                                                <li><img src="/static/item/img/59ded626N7c4cb0a3.jpg" /></li>
                                                                <li><img src="/static/item/img/59ded626Ne3c69b70.jpg" /></li>
                                                                <li><img src="/static/item/img/59ded62dN7e28abc5 (1).jpg" /></li>
                                                                <li><img src="/static/item/img/59ded62cN6e9ac17c.jpg" /></li>
                                                                <li><img src="/static/item/img/59ded620Nfc0ab489.jpg" /></li>
                                                                <li><img src="/static/item/img/59ded60eN3110f3a8.jpg" /></li>
                                                                <li><img src="/static/item/img/59ded62dNfed003a8.jpg" /></li>-->
							</li>
						</ul>
					</div>
					<div id="left">
						< </div>
					<div id="right">
						>
					</div>

				</div>

				<div class="boxx-one">
					<ul>
						<li>

						</li>
						<li>

						</li>
					</ul>
				</div>

			</div>
			<div class="box-two">
				<div class="box-name" th:text="${item.skuInfo?.skuName}">
					华为 HUAWEI Mate 10 6GB+128GB 亮黑色 移动联通电信4G手机 双卡双待
				</div>

				<div class="box-yuyue">
					<div class="yuyue-one">
						热卖促销中
					</div>
					<div class="yuyue-two">
						<ul>
							<li>

							</li>
							<li>

							</li>
						</ul>
					</div>
				</div>
				<div class="box-summary clear">
					<ul>
						<li>惊喜价</li>
						<li>
							<span>￥</span>
							<span th:text="${item.skuInfo?.price}">4499.00</span>
						</li>
						<li>

						</li>
						<li>
							<a href="">

							</a>
						</li>
					</ul>
				</div>
				<div class="box-wrap clear">

				</div>

				<div class="box-stock">
					<ul class="box-ul">
						<li>库存:</li>
						<li class="box-stock-li">
							<div class="box-stock-one">
							</div>


						</li>
						<li>
							<span>无货</span>， 此商品暂时售完
						</li>

					</ul>
				</div>
				<div class="box-stock">
					<ul class="box-ul">
						<li>重  量:</li>
						<li class="box-stock-li">
							<div class="box-stock-one">
							</div>


						</li>
						<li  th:text="${#numbers.formatDecimal(item.spuInfoEntity?.weight,1,2)}+' kg'">
							10 kg
						</li>

					</ul>
				</div>

				<div class="box-attr-3">
					<br/>
					<div class="box-attr-2 clear"  th:each="attr:${item.saleAttr}">
						<dl>
							<dt>选择[[${attr.attrName}]]</dt>
							<dd th:each="vals : ${attr.attrValues}"  th:attr="skus=${vals.skuIds},
                                               class=${#lists.contains(
                                                 		 #strings.listSplit(vals.skuIds,','),
                                                          item.skuInfo.skuId.toString()
                                                       )?
                                               		  'redborder':
                                              		  ''}">
								[[${vals.skuIds}]]
								<a class="sku_attr_value" th:attr="skus=${vals.skuIds}">
									<!--<img src="/static/item/img/59ddfcb1Nc3edb8f1.jpg" />-->
									[[${vals.attrValue}]]
								</a>
							</dd>
						</dl>

					</div>

					<!--							<div class="box-attr-2 clear">
                                                    <dl>
                                                        <dt>选择版本</dt>
                                                        <dd>
                                                            <a href="#">标准版</a>
                                                        </dd>
                                                        <dd>
                                                            <a href="#">套装版</a>
                                                        </dd>
                                                    </dl>
                                                </div>

                                                <div class="box-attr-2 clear">
                                                    <dl>
                                                        <dt>选择内存</dt>
                                                        <dd>
                                                            <a href="#">64GB</a>
                                                        </dd>
                                                        <dd>
                                                            <a href="#">128GB</a>
                                                        </dd>
                                                    </dl>
                                                </div>-->
					<br/>
				</div>

				<div class="box-btns clear">
					<div class="box-btns-one">
						<form id="itemForm" action="http://cart.gulimall.com/addToCart" method="post">
							<input type="text" name="num" id=""  value="1"/>
							<input type="hidden" name="skuId"  th:value="${item.skuInfo?.skuId}" />

							<div class="box-btns-one1">

								<div>
									<button type="button" id="jia">
										+
									</button>
								</div>
								<div>
									<button type="button" id="jian">
										-
									</button>
								</div>

							</div>
						</form>
					</div>
					<div id="cartBtn"  style="cursor:pointer;"  canClick="1"  onclick="addToCart(this)" class="box-btns-two">

						放入购物车

					</div>
				</div>


			</div>

		</div>
	</div>


	<div class="ShopXiangqing">
		<div class="allLeft">
			<!--火热预约-->
			<div class="huoreyuyue">
				<h3>火热预约</h3>
			</div>
			<div class="dangeshopxingqing">
				<ul class="shopdange">
					<li>
						<a href="##"><img src="/static/item/img/5a0afeddNb34732af.jpg" /></a>
						<p>
							<a href="##">OPPO R11s Plus 双卡双待全面屏拍照手机香槟色 全网通(6G RAM+64G ROM)标配</a>
						</p>
						<p><strong class="J-p-20015341974">￥3699.00</strong></p>
					</li>
					<li>
						<a href="##"><img src="/static/item/img/5a12873eN41754123.jpg" /></a>
						<p>
							<a target="_blank" title="詹姆士（GEMRY） R19plus全网通4G 智能手机 双卡双待 6+128GB 鳄鱼纹雅致版（新品预约）" href="/item.html.bak/item.jd.com/20348283521.html">詹姆士（GEMRY） R19plus全网通4G 智能手机 双卡双待 6+128GB 鳄鱼纹雅致版（新品预约）</a>
						</p>
						<p><strong class="J-p-20348283521">￥13999.00</strong></p>
					</li>
					<li>
						<a href="##"><img src="/static/item/img/59ec0131Nf239df75.jpg" /></a>
						<p>
							<a target="_blank" title="斐纳（TOMEFON） 德国家用无线无绳手持立式充电吸尘器 静音大吸力吸尘器TF-X60" href="/item.html.bak/item.jd.com/16683419775.html">斐纳（TOMEFON） 德国家用无线无绳手持立式充电吸尘器 静音大吸力吸尘器TF-X60</a>
						</p>
						<p><strong class="J-p-16683419775">￥1599.00</strong></p>
					</li>
					<li>
						<a href="##"><img src="/static/item/img/59015444N27317512.jpg" /></a>
						<p>
							<a target="_blank" title="斐纳（TOMEFON） 扫地机器人德国智能导航规划全自动超薄扫地机器人吸尘器TF-D60 香槟金" href="/item.html.bak/item.jd.com/12187770381.html">斐纳（TOMEFON） 扫地机器人德国智能导航规划全自动超薄扫地机器人吸尘器TF-D60 香槟金</a>
						</p>
						<p><strong class="J-p-12187770381">￥2599.00</strong></p>
					</li>
				</ul>
			</div>
			<!--看了又看-->
			<div class="huoreyuyue">
				<h3>看了又看</h3>
			</div>
			<div class="dangeshopxingqing">
				<ul class="shopdange">
					<li>
						<a href="##"><img src="/static/item/img/59e55e01N369f98f2.jpg" /></a>
						<p>
							<a target="_blank" title="华为（HUAWEI） 华为 Mate10 4G手机  双卡双待 亮黑色 全网通(6GB RAM+128GB ROM)" href="/item.html.bak/item.jd.com/17931625443.html">华为（HUAWEI） 华为 Mate10 4G手机 双卡双待 亮黑色 全网通(6GB RAM+128GB ROM)</a>
						<p><strong class="J-p-17931625443">￥4766.00</strong></p>
					</li>
					<li>
						<a href="##"><img src="/static/item/img/584fcc3eNdb0ab94c.jpg" /></a>
						<p>
							<a target="_blank" title="华为 Mate 9 Pro 6GB+128GB版 琥珀金 移动联通电信4G手机 双卡双待" href="/item.html.bak/item.jd.com/3749093.html">华为 Mate 9 Pro 6GB+128GB版 琥珀金 移动联通电信4G手机 双卡双待</a>
						</p>
						<p><strong class="J-p-3749093">￥4899.00</strong></p>
					</li>
					<li>
						<!--shopjieshao-->
						<a href="##"><img src="/static/item/img/59eb0df9Nd66d7585.jpg" /></a>
						<p>
							<a target="_blank" title="华为（HUAWEI） 华为 Mate10 手机 亮黑色 全网通(4+64G)标准版" href="/item.html.bak/item.jd.com/12306211773.html">华为（HUAWEI） 华为 Mate10 手机 亮黑色 全网通(4+64G)标准版</a>
						</p>
						<p><strong class="J-p-12306211773">￥4088.00</strong></p>
					</li>
					<li>
						<a href="##"><img src="/static/item/img/5a002ba3N126c2f73.jpg" /></a>
						<p>
							<a target="_blank" title="斐纳（TOMEFON） 扫地机器人德国智能导航规划全自动超薄扫地机器人吸尘器TF-D60 香槟金" href="/item.html.bak/item.jd.com/12187770381.html">斐纳（TOMEFON） 扫地机器人德国智能导航规划全自动超薄扫地机器人吸尘器TF-D60 香槟金</a>
						</p>
						<p><strong class="J-p-12187770381">￥2599.00</strong></p>
					</li>
				</ul>
				<img src="/static/item/img/5a084a1aNa1aa0a71.jpg" />
			</div>
		</div>
		<!--商品介绍-->
		<div class="allquanbushop">
			<ul class="shopjieshao">
				<li class="jieshoa" style="background: #e4393c;">
					<a href="##" style="color: white;">商品介绍</a>
				</li>
				<li class="baozhuang">
					<a href="##">规格与包装</a>
				</li>
				<li class="baozhang">
					<a href="##">售后保障</a>
				</li>
				<li class="pingjia">
					<a href="##">商品评价(4万+)</a>
				</li>
				<li class="shuoming">
					<a href="##">预约说明</a>
				</li>

			</ul>

			<ul class="shopjieshaos posi" style="display: none;">
				<li class="jieshoa" style="background: #e4393c;">
					<a href="#li1" style="color: white;">商品介绍</a>
				</li>
				<li class="baozhuang">
					<a href="#li2">规格与包装</a>
				</li>
				<li class="baozhang">
					<a href="#li3">售后保障</a>
				</li>
				<li class="pingjia">
					<a href="#li4">商品评价(4万+)</a>
				</li>
				<li class="shuoming">
					<a href="#li5">预约说明</a>
				</li>
			</ul>

			<!--商品详情-->
			<div class="huawei">
				<ul class="xuanxiangka">
					<li class="jieshoa actives" id="li1">
						<div class="shanpinsssss">
							<p>
								<a th:text="'品牌：'+${item.spuInfoEntity.brandId}" href="#">品牌:华为（HUAWEI）</a>
							</p>
							<table>
								<tr>
									<td>

										<a href="##">商品名称：[[${item.spuInfoEntity.spuName}]]</a>
									</td>
									<td>
										<a href="##">商品毛重：[[${#numbers.formatDecimal(item.spuInfoEntity?.weight,1,2)}+' kg']]</a>
									</td>
									<td>
										<a href="##">商品编号：[[${item.spuInfoEntity.id}]]</a>
									</td>
									<td>
										<a href="##">商品产地：中国大陆</a>
									</td>
								</tr>
								<tr>
									<td>
										<a href="##">系统：安卓（Android）</a>
									</td>
									<td>
										<a href="##">前置摄像头像素：800万-1599万</a>
									</td>
									<td>
										<a href="##">后置摄像头像素：2000万及以上，1200万-1999万</a>
									</td>
									<td>
										<a href="##">机身内存：128GB</a>
									</td>
								</tr>
								<tr>
									<td colspan="4">
										<a href="##">全面屏，双卡双待，指纹识别，Type-C，VoLTE，2K屏，拍照神器，支持NFC，商务手机，安全手机，分辨率10</a>
									</td>
								</tr>
							</table>
							<div  th:each="img:${item.spuInfoDescEntity.decript.split(',')}">
								<!--										[[${item.spuInfoDescEntity.decript}]]-->
								<img class="xiaoguo" th:src="${img}" />
							</div>
						</div>
					</li>
					<li class="baozhuang actives" id="li2">
						<div class="guiGebox">
							<div class="guiGe" th:each="groupAttr:${item.groupAttrs}">
								<h3 th:text="${groupAttr.groupName}">主体</h3>
								<dl th:each="attr:${groupAttr.attrs}">
									<dt th:text="${attr.attrName}">品牌</dt>
									<dd th:text="${attr.attrValue}">华为(HUAWEI)</dd>
								</dl>
							</div>

							<div class="package-list">
								<h3>包装清单</h3>
								<p>手机（含内置电池） X 1、5A大电流华为SuperCharge充电器X 1、5A USB数据线 X 1、半入耳式线控耳机 X 1、快速指南X 1、三包凭证 X 1、取卡针 X 1、保护壳 X 1</p>
							</div>
						</div>
					</li>
					<!--包装-->
					<li class="baozhang actives" id="li3">
						<div class="oBox">
							<div class="shuoHou">
								<div class="baoZhang">
									<h2>售后保障</h2>
								</div>
							</div>
							<!--厂家服务-->

							<div class="lianBao">

							</div>

						</div>



					</li>
					<!--评价-->
					<li class="PINgjia actives" id="li4">

				</ul>
			</div>
		</div>
	</div>
</div>



<div class="Fixedbian">
	<ul>
		<li class="li1"><a class="aaa" href="##">顶部</a></li>
	</ul>
</div>
<div class="gouwuchexiaguo">
	<img src="/static/item/img/44.png" />
	<span>购物车还没有商品，赶紧选购吧！</span>
</div>
</body>

<script src="/static/item/js/jquery1.9.js" type="text/javascript" charset="utf-8"></script>
<script src="./static/item/js/js.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	function addToCart(obj){
		var canClick = $(obj).attr("canClick");
		if(canClick=='0'){
			return ;
		}
		$("#itemForm").submit();
	}

	function switchSkuId() {
		// 被选中属性
		var checkDivs = $(".redborder div");
		var valueIds="";
		// 拼接成属性值串
		for (var i = 0; i < checkDivs.length; i++) {
			var saleAttrValueDiv = checkDivs.eq(i);
			if(i>0){
				valueIds= valueIds+"|";
			}
			valueIds=valueIds+saleAttrValueDiv.attr("value");
		}
		//页面上的hashjson
		var valuesSku = $("#valuesSku").attr("value");
		var valuesSkuJson=JSON.parse(valuesSku);

		// 看看hash有没有
		var skuId= valuesSkuJson[valueIds];
		// 当前sku
		var skuIdSelf=$("#skuId").val();

		// 判断是否跳转
		if(skuId){
			if(skuId==skuIdSelf){
				$("#cartBtn").attr("class","box-btns-two");
			}else{
				window.location.href="/"+skuId+".html";
			}
		}else{
			$("#cartBtn").attr("class","box-btns-two-off");
		}
	}
	function cksaleChange(skids){ //改变颜色
		//console.log($(".cksale").parent());
		$(this).parent("dl").find("dd").removeClass("redborder");
		$(this).prop("class","cksale redborder");
		console.log(skids);
	}
	$(".sku_attr_value").click(function () {
		var skus = new Array();
		// 1.获取所有加了checked的属性
		// 1.1 点击的元素加上自定义属性
		$(this).addClass("clicked");
		var curr = $(this).attr("skus").split(",");
		// 当前被点击的所有sku组合的数组放进去
		skus.push(curr)
		// 去掉同一行所有的checked
		$(this).parent().parent().find(".sku_attr_value").removeClass("redborder");

		// 注意这个a[class='sku_attr_value checked']
		$("a[class='sku_attr_value redborder']").each(function () {
			// 把选择的元素的[sku_id]都放到skus中
			skus.push($(this).attr("skus").split(","));
		});
		// 2.取出他们的交集 得到skuId 调用filter方法的一定是jQuery元素
		var filterEle = skus[0];
		for (var i = 1; i < skus.length; i++) {
			// $(a).filter(b)就是求a b的交集
			filterEle = $(filterEle).filter(skus[i]);
		}
		console.log(filterEle[0])
		// 3.跳转
		location.href = "http://item.gulimall.com/" + filterEle[0] + ".html";
	});
	function search() {
		var keyword=$("#searchText").val()
		window.location.href="http://search.gulimall.com/search.html?keyword="+keyword;
	}
</script>

</html>
